<template>
  <div>
    <div v-if="!isRecommend && styleType == 1" :class="isShowVipPrice || isShowChainPrice ? '' : 'c-flex-row c-aligni-end'">
      <!-- 课程详情页样式一 -->
      <div class="c-flex-row c-aligni-center c-flexw-wrap priceBar">
        <div class="c-mr16">
          <div class="c-fc-xmlred c-fs28 c-fw600" v-if="isEncryption">加密</div>
          <div class="c-fc-xmlred c-fs34 c-fw600" v-else-if="prodPrice && prodPrice.toString().split('~').length > 1">
            <span class="c-fs20 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{prodPrice}}</span>
          </div>
          <div class="c-fc-xmlred c-fs34 c-fw600" v-else-if="Number(prodPrice) > 0">
            <span class="c-fs20 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{Number(prodPrice).toFixed(2) | moneyStr}}</span>
          </div>
          <div v-else-if="payType==4" class="c-fc-xmlred c-fs28 c-fw600">审核参与</div>
          <div class="c-fc-xmlred c-fs28 c-fw600" v-else>免费</div>
        </div>
        <div
          v-if="isShowVipPrice"
          class="c-flex-row coupon-item c-pr10 c-text-hidden c-mr16">
          <div class="left-bg c-flex-row c-flex-center c-fs16 c-fc-white">
            <span class="idText c-fs16">{{idName}}</span>
          </div>
          <div v-if="(vipDiscountType == 1 && Number(prodPrice*idDiscount) > 0) || (vipDiscountType == 2 && Number(idPrice) > 0)" class="c-lh c-fs18 c-flex-row c-flex-center c-fc-xblack">
            <div class="c-pt2">
              <span class="c-fs16 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{optimal || (!optimal && vipDiscountType == 2) ? Number(idPrice).toFixed(2) : Number(idPrice * idDiscount / 100).toFixed(2)}}</span>
            </div>
          </div>
          <div v-else class="c-lh c-fs18 c-flex-row c-flex-center c-fs16 c-fc-xblack">
            <div class="c-pt2">
              免费
            </div>
          </div>
        </div>
        <div
          v-if="isShowChainPrice"
          class="c-flex-row coupon-item c-pr10 c-text-hidden c-mr16">
          <div class="left-bg c-flex-row c-flex-center c-fs16 c-fc-white">
            <span class="idText c-fs16">{{chainIdName}}</span>
          </div>
          <div class="c-lh c-fs18 c-flex-row c-flex-center c-fc-xblack">
            <div v-if="Number(chainOrderBonus) > 0" class="c-pt2">
              <span class="c-fs16 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{Number(chainOrderBonus).toFixed(2)}}</span>
            </div>
            <div v-else class="c-pt2 c-fs16">免费</div>
          </div>
        </div>
      </div>
      <div v-if="isWxAppIosShowPrice && Number(crossedPrice) > 0" class="c-fs22 c-fc-gray c-text-decoration-through c-lh40" :class="isShowVipPrice || isShowChainPrice ? 'c-pl20' : ''">
        <span class="c-fs22 c-lh40">{{'￥' | iosPriceFilter}}</span><span class="c-lh40">{{crossedPrice}}</span>
      </div>
    </div>
    <div v-if="!isRecommend && styleType == 2">
      <!-- 课程详情页样式二 -->
      <div class="c-flex-row c-aligni-center c-flexw-wrap" :class="customSpacing ? customSpacing : ''">
        <div class="">
          <div class="c-fc-xmlred c-fs32 c-fw600" v-if="isEncryption">加密</div>
          <div v-else-if="payType==4&&isClock==0" class="c-fc-xmlred c-fs32 c-fw600">审核参与</div>
          <div v-else-if="payType==5" class="c-fc-xmlred c-fs32 c-fw600">指定购买</div>
          <div v-else-if="payType==6" class="c-fc-xmlred c-fs32 c-fw600">指定学员</div>
          <div class="c-fc-xmlred c-fs48 c-fw600" v-else-if="prodPrice && prodPrice.toString().split('~').length > 1">
            <span class="c-fs20 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{prodPrice}}</span>
          </div>
          <div class="c-fc-xmlred c-fs48 c-fw600" v-else-if="dataInfo.priceRange && Array.isArray(dataInfo.priceRange) && dataInfo.priceRange.length > 1">
            <span class="c-fs20 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{dataInfo.priceRange[0]}}</span><span class="c-lh c-fs20">起</span>
          </div>
          <div class="c-fc-xmlred c-fs48 c-fw600" v-else-if="Number(prodPrice) > 0">
            <span class="c-fs24 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{Number(prodPrice).toFixed(2)}}</span>
          </div>
          <div class="c-fc-xmlred c-fs32 c-fw600" v-else>免费</div>
        </div>
        <div
          v-if="isShowVipPrice"
          class="c-flex-row c-flex-center coupon-item2 c-bg-xmlred c-ph14 c-hh36 c-lh36 c-fs20 c-fw600 c-ml16 c-flex-shrink0">
          <span class="c-lh c-fs20 text-trans-up c-flex-shrink0">{{idName}}</span>
          <div class="c-flex-row c-flex-center c-flex-shrink0" v-if="(vipDiscountType == 1 && (idPrice * idDiscount) > 0) || (vipDiscountType == 2 && (idPrice) > 0)">
            <span class="c-fs20 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-fs20 c-lh">{{optimal || (!optimal && vipDiscountType == 2) ? Number(idPrice).toFixed(2) : Number(idPrice * idDiscount / 100).toFixed(2)}}</span>
          </div>
          <span v-else class="c-fs20 c-lh c-flex-shrink0">免费</span>
        </div>
        <div
          v-if="isShowChainPrice"
          class="c-flex-row c-flex-center coupon-item2 c-bg-xmlred c-ph14 c-hh36 c-lh36 c-fs20 c-fw600 c-ml16">
          <span class="c-fs20 c-lh">{{chainIdName}}</span>
          <div class="c-flex-row c-flex-center" v-if="Number(chainOrderBonus) > 0"><span class="c-fs20 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-fs20 c-lh">{{Number(chainOrderBonus).toFixed(2)}}</span></div>
          <span v-else class="c-fs20 c-lh">免费</span>
        </div>
        <div v-if="isWxAppIosShowPrice && Number(crossedPrice) > 0" class="c-fs20 c-fc-gray c-text-decoration-through c-pl20">
          <span class="c-fs20">{{'￥' | iosPriceFilter}}</span><span class="">{{crossedPrice}}</span>
        </div>
      </div>
    </div>
    <!-- 保留样式一的内容 音视频专栏还在用 -->
    <div class="c-ph24 c-flex-row c-aligni-center" v-if="isRecommend && styleType==1">
      <div class="c-fs34 c-fw-b theme-fc" v-if="dataInfo && dataInfo.recommend && dataInfo.recommend.isExist && dataInfo.recommend.action"><span class="c-fs20 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{Number(dataInfo.recommend.action.recommendPrice).toFixed(2)}}</span></div>
      <template v-if="dataInfo && dataInfo.recommend && dataInfo.recommend.isExist && dataInfo.recommend.action != null && Number(dataInfo.recommend.action.beProfitRewardPrice) != 0">
        <div class="c-lh c-flex-row c-flex-center c-fc-gray c-text-decoration-through c-ml26 c-ws-n">
          <span class="c-fs18">{{'￥' | iosPriceFilter}}</span>
          <span class="c-lh c-fs22">{{Number(prodPrice).toFixed(2) | moneyStr}}</span>
        </div>
        <div class="c-ml26 c-ww144 c-hh28 c-br5 c-p">
          <div class="c-w100 c-h bg-lpink c-br5"></div>
          <div class="c-pa c-p-t0 c-p-l0 c-w100 c-h c-w100 c-fs18 c-ws-n fc-pink c-flex-row c-flex-center">
            <span class="c-fs16 iconfont c-pr8">&#xe88d;</span>好友推荐专享
          </div>
        </div>
      </template>
    </div>
    <div class="c-minh150" :class="isFlat?'flatRecommend':'recommendBg'" v-if="isRecommend && styleType==2">
      <div class="c-ph24 c-flex-row c-aligni-center c-justify-sb c-hh80 c-fc-white" >
        <div class="c-flex-row c-aligni-baseline ">
          <div class="c-fs34 c-fw-b theme-fc" v-if="dataInfo && dataInfo.recommend && dataInfo.recommend.isExist && dataInfo.recommend.action">
            <span class="c-fs28 c-fc-white">￥</span><span class="c-fw-b c-fs48 c-fc-white" v-html="$getPriceStyleHtml(Number(dataInfo.recommend.action.recommendPrice).toFixed(2))"></span>
          </div>
          <div v-if="isShowRecommendLogo" class="c-lh c-flex-row c-flex-center c-text-decoration-through c-ml20 c-ws-n">
            <span class="c-lh c-fs22">{{'￥' | iosPriceFilter}}{{Number(prodPrice).toFixed(2) | moneyStr}}</span>
          </div>
        </div>
      </div>
      <div class="c-ph24  c-br-tl40 c-br-tr40 c-pt38 bg-pink c-minh80 c-box-shadowInsert2">
        <span v-if="showTryLook" class="try-look-tag c-vcAlign-middle">可试看</span>
        <span class="c-fs30 c-fc-xblack c-fw600 ">
          {{ dataInfo.name }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: "PriceBar",
  created() {
  },
  props: {
    showPrice: { // 作为特殊处理后的价格, 优先于dataInfo.price
      type: Number,
      default: -1
    },
    personalfc: {
      type: String,
      default: ""
    },
    showDiscount: { // 作为特殊处理后的折扣, 优先
      type: Number,
      default: -1
    },
    crossedPrice: {
      type: Number,
      default: -1
    },
    vipDiscountType: {
      type: Number,
      default: -1
    },
    idPrice: {
      type: Number,
      default: -1
    },
    payType: {
      type: Number,
      default: -1
    },
    recType: {//推荐类型 1 访问 2 绑定 3 支付
      type: Number,
      default: 0
    },
    dataInfo: {
      type: Object,
      default: null
    },
    styleType: {
      type: Number,
      default: 1
    },
    isClock: {
      type: Number,
      default: 0
    },
    customSpacing: {
      type: String,
      default: 'c-ph24'
    },
    isChain: {
      type: Boolean,
      default: false
    },
    chainOrderBonus: {
      type: Number,
      default: 0
    },
    chainIdName: {
      type: String,
      default: ""
    },
    chainInfo: {
      type: Object,
      default: null
    },
    showTryLook: { //是否可试看（公开课、直播间用)
      type: Boolean,
      default: false
    },
    isFlat: {// 没有圆角，true是平的，false有圆角
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      ckFrom: global.ckFrom,
      isWxAppIosShowPrice: false
    };
  },
  computed: {
    optimal() {
      return this.dataInfo ? this.dataInfo.optimal : null;
    },
    isEncryption() {
      return this.dataInfo && this.dataInfo.payType == 3;
    },
    prodPrice() {
      const price = this.dataInfo ? this.dataInfo.price : 0;
      return this.showPrice != -1 ? Number(this.showPrice) : price;
    },
    // 判断是否显示推荐有礼，
    isRecommend() {
      if (this.dataInfo) {
        return this.recType == 3 && this.dataInfo.recommend && this.dataInfo.recommend.isExist;
      }
      return false
    },
    isShowRecommendLogo() {
      return this.dataInfo && this.dataInfo.recommend && this.dataInfo.recommend.isExist && this.dataInfo.recommend.action != null && Number(this.dataInfo.recommend.action.beProfitRewardPrice) != 0
    },
    // 判断是否显示vip/svip价格
    isShowVipPrice() {
      if (this.optimal) {
        // 知识/互动产品存在payType || 类型是商品
        let prodTypeShow = (!this.isEncryption && this.payType > 0) || this.dataInfo.prodType == this.ckFrom.shopping;
        return this.isWxAppIosShowPrice && this.optimal && [2, 3, 4].includes(this.optimal.optimalPriceType) && prodTypeShow && !this.prodPrice.toString().includes('~') &&
             ((this.vipDiscountType == 1 && Number(this.idDiscount) < 100) ||
               (this.vipDiscountType == 2 && Number(this.idPrice) < Number(this.prodPrice)));
      } else {
        return this.isWxAppIosShowPrice && !this.isChain && this.idName && !this.isEncryption && Number(this.prodPrice) > 0 && (this.payType > 0 || this.dataInfo.prodType == this.ckFrom.shopping) &&
             ((this.vipDiscountType == 1 && Number(this.idDiscount) < 100) ||
               (this.vipDiscountType == 2 && Number(this.idPrice) < Number(this.prodPrice)))
      }
    },
    isShowChainPrice() {
      if (this.optimal) {
        return this.isWxAppIosShowPrice && this.optimal && [10, 20, 99].includes(this.optimal.optimalPriceType);
      } else {
        return this.isWxAppIosShowPrice && this.isChain && this.chainIdName && this.chainOrderBonus > 0 && this.chainOrderBonus < Number(this.prodPrice) && !this.isEncryption && Number(this.prodPrice) > 0
      }
    }
  },
  watch: {
    dataInfo: {
      handler(newVal) {
        const dataInfo = JSON.parse(JSON.stringify(newVal));
        const vipType = this.vipType;
        let custNameMap = utilJs.getCustNameMap();
        if (dataInfo) {
          this.vipDiscountType = -1;
          this.crossedPrice = -1;
          this.payType = -1;
          let vipDiscountType = (dataInfo.prodType != this.ckFrom.shopping && (vipType == 3 || vipType > 4) && dataInfo.commonProdInfo && dataInfo.commonProdInfo.agentDiscount < 100) ? 1 : (dataInfo.vipDiscountType ? Number(dataInfo.vipDiscountType) : 1);
          this.vipDiscountType = this.vipDiscountType != -1 ? this.vipDiscountType : vipDiscountType;
          this.crossedPrice = dataInfo.prodType == this.ckFrom.shopping ? dataInfo.originalPrice : this.crossedPrice != -1 ? this.crossedPrice : dataInfo.crossedPrice;
          this.payType = this.payType != -1 ? this.payType : dataInfo.prodType == this.ckFrom.camp && dataInfo.payType == 4 ? -1 : dataInfo.payType;
          const svipDiscount = dataInfo.svipDiscount < 100 ? dataInfo.svipDiscount : 100;
          const vipDiscount = dataInfo.vipDiscount < 100 ? dataInfo.vipDiscount : 100;
          const agentDiscount = dataInfo.prodType != this.ckFrom.shopping ?
                                (dataInfo.commonProdInfo && dataInfo.commonProdInfo.agentDiscount < 100 ? dataInfo.commonProdInfo.agentDiscount : 100) :
                                (dataInfo.commonProdInfo && dataInfo.commonProdInfo.agentDiscount ? dataInfo.commonProdInfo.agentDiscount : this.vipDiscountType == 1 ? 100 : dataInfo.price);
          if (!dataInfo.optimal) {
            custNameMap[1] = 'VIP';
            this.idName = custNameMap[vipType];
            // 商城跟其他模块字段不一致
            if (dataInfo.prodType == this.ckFrom.shopping) {
              this.idPrice = dataInfo.vipDiscountType == 2 ? (
                (vipType == 4 && Number(dataInfo.svipDiscount) < Number(dataInfo.price))
                  ? Number(dataInfo.svipDiscount)
                  :
                (vipType == 2 && Number(dataInfo.vipDiscount) < Number(dataInfo.price))
                  ? Number(dataInfo.vipDiscount)
                  :
                ((vipType == 3 || vipType > 4) && Number(dataInfo.commonProdInfo.agentDiscount) < Number(dataInfo.price))
                  ? Number(dataInfo.commonProdInfo.agentDiscount) : Number(dataInfo.price)
              ) : Number(dataInfo.price);
            } else {
              this.idPrice = dataInfo.vipDiscountType == 2 ? (
                (vipType == 4 && Number(dataInfo.svipDiscountPrice) < Number(dataInfo.price))
                  ? Number(dataInfo.svipDiscountPrice)
                  :
                (vipType == 2 && Number(dataInfo.vipDiscountPrice) < Number(dataInfo.price))
                  ? Number(dataInfo.vipDiscountPrice)
                  : Number(dataInfo.price)
              ) : Number(dataInfo.price);
            }
            this.idDiscount = (vipType == 3 || vipType > 4) && agentDiscount < 100 ? agentDiscount :
                    vipType == 4 && svipDiscount < 100 ? svipDiscount :
                    ((((vipType == 1 || vipType == 2) && !dataInfo.optimal) || (vipType == 2 && dataInfo.optimal)) && vipDiscount < 100) ? vipDiscount : 100;
          } else {
            // optimalPriceType：1 产品本身价格 2 vip价格 3 svip价格 4 服务商 101 限时购 102 拼团 112 砍价  10 链动会员 20 链动代理商 99 链动复购
            const optimal = dataInfo.optimal;
            this.idName = optimal.optimalPriceType == 2 ? 'VIP' : optimal.optimalPriceType == 3 ? 'SVIP' : optimal.optimalPriceType == 4 ? custNameMap[vipType] : '';
            this.idPrice = optimal.optimalPrice;
            this.idDiscount = optimal.optimalPriceType == 2 ? vipDiscount : optimal.optimalPriceType == 3 ? svipDiscount : optimal.optimalPriceType == 4 ? agentDiscount : '';
          }
        }
        if (!newVal) {
          custNameMap[1] = 'VIP';
          this.idName = custNameMap[vipType];
          this.idPrice = Number(this.showPrice);
          this.idDiscount = Number(this.showDiscount);
        }
        // ios小程序非实体商品不显示价格，实体商品显示价格
        this.isWxAppIosShowPrice = (!this.$isWxAppIos() && dataInfo.prodType != this.ckFrom.shopping) || (dataInfo.prodType == this.ckFrom.shopping);
      },
      immediate: true,
      deep: true
    },
    chainInfo: {
      handler(newVal) {
        const chainInfo = JSON.parse(JSON.stringify(newVal));
        if (chainInfo) {
          this.isChain = chainInfo.isChainProd;
          this.chainOrderBonus = chainInfo.enableReorderDiscount == 1 && chainInfo.isReorder ? chainInfo.reorderBonus : chainInfo.enableOrderDiscount == 1 ? chainInfo.orderBonus : 0;
          this.chainIdName = chainInfo.enableReorderDiscount == 1 && chainInfo.isReorder ? '复购价' : chainInfo.userType == 1 ? '普通用户' : chainInfo.userType2Name[chainInfo.userType];
        }
      },
      immediate: true,
    },
  },
  methods: {
  },
  activated() {
  },

};
</script>

<style scoped>
.left-bg {
  padding-left: 0.3rem;
  padding-right: 0.4rem;
  height: 0.75rem;
  background: linear-gradient(90deg, #4e4e5c, #23232f);
  /* background: linear-gradient(90deg,#333333, rgba(51,51,51,0.7) 100%); */
  /* border-radius: 0.15rem 0px 0.5rem 0.15rem; */
  color: #f5d199;
  transform: skew(-25deg, 0);
  transform-origin: left top;
}
.idText {
  color: #ffe6d5;
  transform: skew(25deg, 0);
  transform-origin: left top;
}
.coupon-item {
  border-radius: 0.15rem 0px 0px 0.15rem;
  position: relative;
  border: none;
  color: #333;
}
.coupon-item:after {
  border-radius: 0.25rem;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #333;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.49);
  transform: scale(0.49);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
.coupon-item2 {
  border-radius: 0.6rem;
  position: relative;
  border: none;
  color: #fff;
}
.coupon-item2:after {
  content: "";
  width: 0.5rem;
  height: 0.2rem;
  position: absolute;
  background-image: url('../../../assets/filletedCorner2.png');
  background-position: center bottom;
  background-size: 100%;
  background-repeat: no-repeat;
  bottom: 0;
  left: -0.05rem;
}
.bg-lpink {
  background: rgba(246, 65, 99, 0.1);
}
.fc-pink {
  color: #f64163;
}
.bg-pink {
  background-image: linear-gradient(180deg, #FFE7E9 0%, #FFFFFF 40%);
}
.recommendBg {
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/example-images/activity/recommendLg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  margin-top: -1.5rem;
}
.flatRecommend {
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/example-images/activity/liveRecomme.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.try-look-tag{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.3rem;
  width: 1.55rem;
  height: 0.7rem;
  border-radius: 0.1rem;
  background: rgba(222, 186, 131, 0.3);
  font-size: 0.45rem;
  color: #A0701C;
}
</style>
